<template>
  <!-- 商学院 -->
  <view class="page">
    <nav-bar
      :navTitle="title"
      iconColor="#000"
      :backgroundColor="backgroundColor"
      :isBackgroundColor="false"
      :isBack="false"
    ></nav-bar>
    <view class="headPart flex align-center bg-white justify-between">
      <view class="searchPart flex align-center">
        <image
          src="https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/merchant/searchIcon.png"
          class="searchIcon"
          mode="scaleToFill"
        />
        <input
          type="text"
          class="searchInput h-full"
          placeholder="请搜索课程名称"
          @confirm="searchSubmitEvent"
          confirm-type="search"
          v-model="keyword"
          name="search"
          placeholder-class="placeholder"
        />
      </view>
      <view
        class="rightPart flex flex-column align-center"
        @click="goToLearnRecord"
      >
        <image
          src="https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/orderes.png"
          mode="scaleToFill"
          class="orderes"
        />
        <view class="f-s-22 col-279 mt6">学习记录</view>
      </view>
    </view>
    <view class="videoPart">
      <image
        src="https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/bigBanner2.png"
        class="bigBanner"
        mode="scaleToFill"
      />
    </view>
    <view class="starMentor bg-white">
      <view class="titlePart flex align-center justify-between">
        <view class="col-727 f-s-32 fw-600">明星导师</view>
        <view class="col-4aa f-s-24" @click="goToMentorList">更多</view>
      </view>
      <view class="flex align-center justify-between mt24">
        <view
          v-for="(item, index) in starMentorList"
          :key="index"
          class="text-center"
        >
          <image :src="item.img" class="starMentorImg" mode="scaleToFill" />
          <view class="f-s-24 col-727 mt6">{{ item.name }}</view>
          <view class="f-s-20 col-4aa mt6">{{ item.introduce }}</view>
        </view>
      </view>
    </view>
    <view class="salesVolume">
      <comprehensive></comprehensive>
    </view>
    <custom-tabbar :selected="2" @change="onTabChange" />
  </view>
</template>

<script>
import navBar from "@/components/navBar";
import customTabbar from "@/components/custom-tabbar.vue";
import comprehensive from "./components/comprehensive.vue";
export default {
  components: {
    navBar,
    customTabbar,
    comprehensive,
  },
  data() {
    return {
      title: "全部课程",
      backgroundColor: "#fff",
      starMentorList: [
        {
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/carousel1.png",
          name: "张老师",
          introduce: "十年市场营销经验",
        },
        {
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/carousel1.png",
          name: "陈老师",
          introduce: "专业讲师",
        },
        {
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/carousel1.png",
          name: "刘老师",
          introduce: "专业讲师",
        },
      ],
    };
  },
  onLoad(options) {},
  methods: {
    onTabChange() {},
    // 导师列表
    goToMentorList() {
      uni.navigateTo({
        url: "/pages/mentorList/index",
      });
    },
    // 学习记录
    goToLearnRecord() {
      uni.navigateTo({
        url: "/pages/learnRecord/index",
      });
    },
  },
};
</script>

<style scoped lang="scss">
.page {
  padding-bottom: 100rpx;
}
.headPart {
  padding: 30rpx 24rpx 20rpx 24rpx;
  .searchPart {
    border-radius: 40rpx;
    padding: 0rpx 32rpx;
    background: #f4f6fa;
    flex: 1;
    height: 80rpx;
    .searchIcon {
      width: 36rpx;
      height: 39rpx;
    }
    .searchInput {
      margin-left: 10rpx;
    }
  }
  .rightPart {
    margin-left: 28rpx;
  }
  .orderes {
    width: 36rpx;
    height: 42rpx;
  }
}
.videoPart {
  margin: 30rpx 24rpx 0rpx 24rpx;
}
.bigBanner {
  height: 300rpx;
  width: 100%;
  border-radius: 24rpx;
}
.starMentor {
  border-radius: 24rpx;
  padding: 28rpx 40rpx;
  margin: 32rpx 24rpx 0rpx 24rpx;
  .starMentorImg {
    width: 192rpx;
    height: 188rpx;
    border-radius: 20rpx;
  }
}
.salesVolume {
  margin: 40rpx 24rpx 20rpx 24rpx;
}
.col-279 {
  color: #717279;
}
.mt6 {
  margin-top: 6rpx;
}
</style>
